<template>
  <div class="columns">
    <div class="column">
      <div style="padding: 10% 5% 10% 10%; text-align: left; color: #0a2437">
        <b-carousel :indicator-inside="false" style="padding: 0px 10% 0px 30%">
          <b-carousel-item v-for="(item, i) in 5" :key="i">
            <div class="block">
              <b-field grouped group-multiline>
                <div class="control">
                  <b-switch v-model="rounded"> Rounded </b-switch>
                </div>
              </b-field>
            </div>
            <b-image
              class="image"
              :src="getImgUrl(i)"
              :rounded="rounded"
            ></b-image>
          </b-carousel-item>
          <template #indicators="props">
            <b-image
              class="al image"
              :src="getImgUrl(props.i)"
              :title="props.i"
              :rounded="rounded"
            ></b-image>
          </template>
        </b-carousel>
      </div>
    </div>

    <div class="column">
      <div style="padding: 10% 10% 10% 5%; text-align: left; color: #0a2437">
        <p style="font-size: 200%">WAIFU LABS</p>
        <p style="margin-top: 10%">
          我们教了世界一流的人工智能如何绘制动漫。 您看到的所有图纸都是由非人类艺术家制作的！ 狂野吧？ 事实证明，机器对人的爱几乎与人类一样多。
        <p style="margin-top: 10%">
          我们自豪地介绍人类历史的下一章：来自世界上最聪明的AI艺术家的点燃的waifu lab。
        </p>
        <p style="margin-top: 10%">
          在不到5分钟的时间内，艺术家即可了解您的偏好，从而为您量身打造完美的waifu。
        </p>
        <a href="https://github.com/NVlabs/stylegan2-ada-pytorch" target="_blank">
        <b-button
          type="is-warning is-light"
          style="margin: 5% 5% 0px 0px"
        >
          基于stylegan2-ada-pytorch
        </b-button>
        </a>
        <a href="https://gitee.com/wumoe/waifuexist" target="_blank">
          <b-button type="is-dark" style="margin: 5% auto 0px 0px">
            点星支持
          </b-button>
        </a>
        <b-button
          tag="router-link"
          to="/Choose1"
          type="is-info"
          style="
            margin-top: 10%;
            width: 50%;
            margin-left: 25%;
            margin-right: 25%;
          "
        >
          Meet your dream waifu
        </b-button>
        <b-button
          tag="router-link"
          to="/Change"
          type="is-info"
          style="
            margin-top: 1%;
            width: 50%;
            margin-left: 25%;
            margin-right: 25%;
          "
        >
          3D To 2D
        </b-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      rounded: false,
    };
  },
  methods: {
    getImgUrl(value) {
      return require(`@/picture/${value + 1}.jpg`);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.is-active .al img {
  filter: grayscale(0%);
}
.al img {
  filter: grayscale(100%);
}
</style>
